<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3-JSONP</title>
</head>
<body>
    <button id="btn">发ajax请求(jsonp)</button>
    <script>
     /* 1.jsonp
     简单说:利用script
     前台
       创建script标签,指定src为跨域的请求url
       定义一个接收数据的函数,并将函数名指定为query参数
     后台
      确定要返回的响应数据data后, 读取回调函数名
      返回函数调用的js代码: callback(data)
      const data = 'xxxx'
      const callback = req.query.callback
      res.send(`${callback}(${data})`)
       */
        
       document.querySelector('#btn').onclick = ()=>{
        // 创建script标签,指定src为跨域的请求url
        const script = document.createElement('script')
        script.src = 'http://localhost:3014/jsonp-server?callback=fn'
        // 将script标签添加到body中 => 浏览器就会自动发请求
        document.body.appendChild(script)
       }

       //定义一个接收数据的函数,并将函数名指定为query参数
       function fn(data){
        console.log(data);
        alert(data)
       }


    </script>
</body>
</html>